<template>
  <el-card class="grid-content">
    <el-tabs type="card" class="demo-tabs" :stretch="true">
      {{ cronAll.secondData }}
      <el-tab-pane label="秒"><second v-model:secondValue="cronAll.secondValue"></second></el-tab-pane>
      <el-tab-pane label="分"><minute v-model:minuteValue="cronAll.minuteValue"></minute></el-tab-pane>
      <el-tab-pane label="时"><hour v-model:hourValue="cronAll.hourValue"></hour></el-tab-pane>
      <el-tab-pane label="日"><day v-model:dayValue="cronAll.dayValue"></day></el-tab-pane>
      <el-tab-pane label="月"><month v-model:monthValue="cronAll.monthValue"></month></el-tab-pane>
      <el-tab-pane label="周"><week v-model:weekValue="cronAll.weekValue"></week></el-tab-pane>
      <el-tab-pane label="年"><year v-model:yearValue="cronAll.yearValue"></year></el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script lang="ts" setup>
import second from '@/components/cron/CronSecond.vue'
import minute from '@/components/cron/CronMinute.vue'
import hour from '@/components/cron/CronHour.vue'
import day from '@/components/cron/CronDay.vue'
import month from '@/components/cron/CronMonth.vue'
import week from '@/components/cron/CronWeek.vue'
import year from '@/components/cron/CronYear.vue'
const cronAll = reactive({
  secondValue: '',
  minuteValue: '',
  hourValue: '',
  dayValue: '',
  monthValue: '',
  weekValue: '',
  yearValue: ''
})
let props = defineProps(['cronValue'])
const emit = defineEmits(['update:cronValue'])
watch(cronAll, value => {
  const data = cronAll.secondValue + ' ' + cronAll.minuteValue + ' ' + cronAll.hourValue + ' ' + cronAll.dayValue + ' ' + cronAll.monthValue + ' ' + cronAll.weekValue + ' ' + cronAll.yearValue
  emit('update:cronValue', data)
})
watch(props, () => {
  // 初始化赋值
  if (props.cronValue) {
    const cronArr = props.cronValue.split(' ')
    cronAll.secondValue = cronArr[0]
    cronAll.minuteValue = cronArr[1]
    cronAll.hourValue = cronArr[2]
    cronAll.dayValue = cronArr[3]
    cronAll.monthValue = cronArr[4]
    cronAll.weekValue = cronArr[5]
    cronAll.yearValue = cronArr[6]
  }
})
</script>
<style lang="scss" scoped>
.el-tabs {
  width: 100%;
}
.grid-content {
  border-radius: 10px;
}
</style>
